import './index.scss';
import FormHeader from './formHeader'
import TableList from './table'
import { ThemeCon } from '../../../../context/themeContext' // 上下文
import { useCallback, useRef, useState, useImperativeHandle, useContext } from 'react';
function EventList() {
   // context_learn
   const { theme, setTheme } = useContext(ThemeCon) // 使用useContext 
   setTimeout(() => {
      setTheme('Context变化了')
   }, 2000)
   //----------
   const [dataList, setDataList] = useState([])
   const dataListRef = useRef([])
   const delDateList = useCallback((item) => {
      // 执行删除逻辑
      const newdataList = dataListRef.current.filter((it) => {
         return it.key !== item.key
      })
      setDataList(newdataList)
   }, [])
   // 类似UseEffect
   useImperativeHandle(dataListRef, () => {
      console.log('变化了')
      return dataList
   }, [dataList])

   return (<>
      <div>{theme}</div>
      <FormHeader setDataList={setDataList} ></FormHeader>
      <TableList dataList={dataList} delDateList={delDateList}></TableList>
   </>)
}

export default EventList